<template>
  <div>
    <el-row>
      <el-col>
        <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
      </el-col>
    </el-row>

  <!-- 传统html页面布局，横向布局不容易实现，
    新的布局方式flex，它支持新的属性justify
   -->
    <el-row type="flex" justify="start">
      <el-button type="primary" @click="toadd" icon="el-icon-search">新增</el-button>
    </el-row>

    <el-row>
      <el-col>
        <el-table :data="list">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="sellPoint" label="卖点"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="note" label="详情"></el-table-column>

          <el-table-column label="[操作]" width="220">
            <!--  增加template标签，动态获取当前行的索引和数据 -->
            <template slot-scope="s">
              <el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-edit">修改</el-button>
              <el-button type="danger" @click="del(s.$index)" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--定义对话框-->
    <el-dialog :visible.sync="dialogVisible" width="30%" title="提示">
      <span>
        <!-- 加入一个form表单 -->
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题:">
            <el-input v-model="m.title"></el-input>
          </el-form-item>

          <el-form-item label="卖点:">
            <el-input v-model="m.sellPoint"></el-input>
          </el-form-item>

          <el-form-item label="价格:">
            <el-input v-model="m.price"></el-input>
          </el-form-item>

          <el-form-item label="详情:">
            <el-input v-model="m.note" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="save">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  //定义一个组件导出,data采用es6新标准函数写法
  export default{
    name: 'Item',
    data(){
      return {
        sysname: '京淘电商平台',
        dialogVisible: false,   //公用变量，修饰对话框是否展现
        isUpdate: false,        //公用变量，判断是否修改的依据
        index: '',                 //公用变量，保存当前修改记录的索引
        m: {    //为对话框表单声明对象变量，设置初始值，
          title: '', //当修改表单框内容，此时这里值随之改变，数据驱动体现
          sellPoint: '',
          price: '',
          note: ''
        },
        list: [
          {
              title: 'javascript入门宝典',
              sellPoint: '这本书很畅销',
              price: 99,
              note: '这本是主流作家所写'
          },
          {
              title: 'java是全球第一大语言',
              sellPoint: 'java从业人最多',
              price: 188,
              note: '学java拿高薪'
          }
        ]
      }
    },
    methods:{
        toadd: function(){
          //在方法区引入数据区数据，要加一个关键字
          this.dialogVisible = true;  //展现对话框
          this.m = {};                  //利用js动态特点，把所有属性置空
          this.isUpdate = false;      //新增标识
        },
        toupdate: function(index, row){
          //1. 把row当前行的值赋值 m
          //this.m = row;   //会有副作用
          this.m = JSON.parse(JSON.stringify(row));

          //2. 打开对话框
          this.dialogVisible = true;
          this.isUpdate = true;     //修改标识
          this.index = index;       //通过element-ui.slot获取到当前索引值，赋值全局变量
        },
        del: function(index){
          //删除，第一个参数当前索引值，第二个参数删除个数
          this.list.splice(index, 1);
        },
        save: function(){ //新增和修改复用这个按钮，主流开发习惯方式
          //把当前数据，修改页面输入框内容，其结果就保存在m数据中

          if(!this.isUpdate){    //新增
            //实现把m对象放入list对象中，javascript原生splice函数
            this.list.splice(0,0, this.m);
          }else{              //修改
            //？怎么获取当前索引值，
            //第二个参数，删除1个，第三个参数，当前用户修改值
            this.list.splice(this.index, 1, this.m);
          }

          this.dialogVisible = false;
        }
    }
  }
</script>

<style>
  textarea{
    font-family: "微软雅黑";
  }
</style>
